<template>
  <div>
    <a-modal v-model:visible="visible" width="80%">
      <template #title> 入库记录 </template>
      <a-table
        :columns="columns"
        :data="productiondata"
        :loading="formLoading"
        size="large"
        :pagination="pagination"
        @page-change="handlePageChange"
        :bordered="{ wrapper: true, cell: true }"
      >
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
        </template>
        <template #winetype_id="{}">
          <span>{{ recordInfo.wine_name }}</span>
        </template>
         <!-- 规格 -->
        <template #winetype_speci="{}">
          <span>{{ getGuige(recordInfo) }}</span>
        </template>
        <template #produce_time="{ record }">
          <span>{{ dayjs(record.produce_time).format('MM-DD') }}</span>
        </template>
        <template #product_costom="{ record }">
          <span class="circle" v-if="record.product_costom === '0'"></span>
          <span class="circle pass" v-else></span>
          {{ record.product_costom === '0' ? '否' : '是' }}
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getProducedataList } from '@/api/producetion';
import dayjs from 'dayjs';

const props = defineProps({
  getGuige:{type:Function}
})
const visible = ref(false);
const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
});
const handlePageChange = (page) => {
  let params = {
    current: page,
    winetype_id: recordInfo.wine_id,
  }
  getProducedataInfo(params);
};
const productiondata = ref([]);
const formLoading = ref(false);
const recordInfo = ref();
const openDialog = async (record: any) => {
  recordInfo.value = record;
  let params = {
    current: 1,
    winetype_id: record.wine_id,
  };
  getProducedataInfo(params);
  visible.value = true;
};

const getProducedataInfo = async (params) => {
  formLoading.value = true;
  
  const { data, code } = await getProducedataList(params);
  if (code === 200) {
    formLoading.value = false;
    pagination.total = data.total;
    if (data.records.length > 0) {
      productiondata.value = data.records;
    }
  }
}

defineExpose({
  openDialog,
});

const columns = ref([
  {
    title: '#',
    dataIndex: 'index',
    slotName: 'index',
    align: 'center',
  },
  {
    title: '酒类',
    slotName: 'winetype_id',
    align: 'center',
  },
  {
    title: '规格',
    slotName: 'winetype_speci',
    align: 'center',
  },
  {
    title: '生产日期',
    slotName: 'produce_time',
    align: 'center',
  },
  {
    title: '产量/箱',
    dataIndex: 'produce_box',
    align: 'center',
  },
  {
    title: '产量/瓶',
    dataIndex: 'produce_bottle',
    align: 'center',
  },
  {
    title: '批次',
    dataIndex: 'product_batch',
    align: 'center',
  },
  {
    title: '是否定制',
    slotName: 'product_costom',
    align: 'center',
  },
  {
    title: '备注',
    dataIndex: 'product_remark',
    align: 'center',
  },
]);
</script>

<style lang="scss" scoped></style>